﻿@{
    ViewBag.Title = "Home Page";
}

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/bootstrap")

<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <h4>Active <small>update sessions count</small></h4>
                <div id="updateSessions"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <h4>RAM <small>usage</small></h4>
                <div id="ramUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>Hard disk <small>activity</small></h4>
                <div id="diskUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>CPU <small>usage</small></h4>
                <div id="cpuUsage"></div>
            </div>
            <div class="col-md-3">
                <h4>C: <small>drive free space</small></h4>
                <div id="diskSpaceUsage"></div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-12">
                <h3>@Html.ActionLink("5", "Users", "Home") <small>users are currently logged in</small></h3>
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h4><a href="#">Events </a><small>only last 10 are shown</small> <span class="badge pull-right">42</span></h4>
                <ul class="list-group">
                    <li class="list-group-item"><span class="label label-default">10:00</span> A new XDS was registered</li>
                    <li class="list-group-item"><span class="label label-warning">09:52</span> Authentication failed for user 'admin'</li>
                    <li class="list-group-item"><span class="label label-default">09:42</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">09:30</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-danger">09:01</span> Failed to connect to DB Europe66</li>
                    <li class="list-group-item"><span class="label label-default">08:54</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">08:47</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">08:30</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-default">07:01</span> New samples were uploaded</li>
                    <li class="list-group-item"><span class="label label-warning">06:52</span> Data cleanup job failed for network 'EU'</li>
                </ul>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/signalr")
    @Scripts.Render("~/bundles/highcharts")
    <script src="~/signalr/hubs"></script>

<script type="text/javascript">
    var diskUsageChart;
    var cpuUsageChart;
    var ramUsageChart;
    var diskSpaceUsageChart;
    var updateSessionsChart;

    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: true
            }
        });
    });

    $(function () {

        diskUsageChart = new Highcharts.Chart({
            chart: {
                height: 200,
                type: 'gauge',
                renderTo: 'diskUsage',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            credits: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 100,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: null
                },
                plotBands: [{
                    from: 0,
                    to: 75,
                    color: '#55BF3B' // green
                }, {
                    from: 75,
                    to: 90,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 90,
                    to: 100,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'Disk usage',
                data: [0],
                tooltip: {
                    valueSuffix: ' %'
                }
            }]

        });

        cpuUsageChart = new Highcharts.Chart({
            chart: {
                height: 200,
                type: 'gauge',
                renderTo: 'cpuUsage',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            credits: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 100,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: null
                },
                plotBands: [{
                    from: 0,
                    to: 75,
                    color: '#55BF3B' // green
                }, {
                    from: 75,
                    to: 90,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 90,
                    to: 100,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'CPU usage',
                data: [0],
                tooltip: {
                    valueSuffix: ' %'
                }
            }]

        });

        ramUsageChart = new Highcharts.Chart({
            chart: {
                height: 200,
                renderTo: 'ramUsage',
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            credits: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            tooltip: {
                pointFormat: '<b>{point.y:.1f} MB</b>'
            },

            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    }
                }
            },

            series: [{
                type: 'pie',
                innerSize: '40%',
                data: [['Free', 100.0], ['Used', 0.0]]
            }]
        });

        diskSpaceUsageChart = new Highcharts.Chart({
            chart: {
                height: 200,
                renderTo: 'diskSpaceUsage',
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            credits: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            tooltip: {
                pointFormat: '<b>{point.y:.1f} GB</b>'
            },

            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    }
                }
            },

            series: [{
                type: 'pie',
                innerSize: '40%',
                data: [['Free', 100.0], ['Used', 0.0]]
            }]
        });

        // creates a proxy to the health check hub
        var hub = $.connection.mosaicHub;
        $.connection.hub.start();

        /*
        $.connection.hub.start().done(function () {
            alert("hub started");
        });
        */


        hub.client.updateHealthStatus = function (data) {
            var diskUsage = diskUsageChart.series[0].points[0];
            diskUsage.update(data.DiskUsage);

            var cpuUsage = cpuUsageChart.series[0].points[0];
            cpuUsage.update(data.CpuUsage);

            var ramData = [['Free', data.FreeRam], ['Used', data.UsedRam]];
            ramUsageChart.series[0].setData(ramData, true);

            var diskSpaceData = [['Free', data.FreeHDD], ['Used', data.UsedHDD]];
            diskSpaceUsageChart.series[0].setData(diskSpaceData, true);
        };
    });

    $(function () {

        updateSessionsChart = new Highcharts.Chart({
            chart: {
                height: 300,
                type: 'spline',
                renderTo: 'updateSessions',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function () {
                            var x = (new Date()).getTime(), // current time
                                y = parseInt(0 + Math.random() * 10);
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },

            title: {
                text: null
            },

            credits: {
                enabled: false
            },

            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },

            yAxis: {
                min: 0,
                title: {
                    text: null
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
                }
            },

            legend: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            series: [{
                name: 'Update sessions count',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: parseInt(0 + Math.random() * 10)
                        });
                    }
                    return data;
                })()
            }]
        });
    });

</script>


}


